import "./public-path";
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router";

// @ts-ignore
let instance = null;
function render(props = {}) {
  // @ts-ignore
  const { container } = props;
  instance = createApp(App);
  instance.use(router);
  instance.use(store);
  instance.mount(container ? container.querySelector("#app") : "#app");
}

// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log("%c%s", "color: green;", "vue3.0 app bootstraped");
}

// @ts-ignore
function storeTest(props) {
  props.onGlobalStateChange &&
    props.onGlobalStateChange(
      // @ts-ignore
      (value, prev) =>
        console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
      true
    );
  props.setGlobalState &&
    props.setGlobalState({
      ignore: props.name,
      user: {
        name: props.name,
      },
    });
}

// @ts-ignore
export async function mount(props) {
  storeTest(props);
  render(props);
  // @ts-ignore
  instance.config.globalProperties.$onGlobalStateChange =
    props.onGlobalStateChange;
  // @ts-ignore
  instance.config.globalProperties.$setGlobalState = props.setGlobalState;
}

export async function unmount() {
  // @ts-ignore
  instance.unmount();
  // @ts-ignore
  instance._container.innerHTML = "";
  instance = null;
  // @ts-ignore
}
